<template>
	<div class="formList-container">
		<FormDetailList v-if="viewFormTips" :visible="viewFormTips" :serviceNo="serviceNo" @cancel="closeDetail" :list="formDetailList" />
		<el-form label-position="top" label-width="80px" :model="form">
			<div class="form-search">
				<el-form-item label="表单名称">
					<el-select v-model="form.formName" placeholder="请选择表单名称">
						<el-option v-for="item in selectFromName" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="表单流水号">
					<el-input placeholder="请输入表单流水号" v-model="form.formNumber"></el-input>
				</el-form-item>
				<el-form-item label="推送时间">
					<el-date-picker
						class="date-picker"
						v-model="form.pushTime"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						align="right"
						start-placeholder="请输入推送时间"
						:default-time="['12:00:00', '08:00:00']"
					>
					</el-date-picker>
				</el-form-item>
				<!-- <el-form-item label="获取时间">
					<el-date-picker
						class="date-picker"
						v-model="form.getTime"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						align="right"
						start-placeholder="请输入获取时间"
						:default-time="['12:00:00', '08:00:00']"
					>
					</el-date-picker>
				</el-form-item> -->
				<el-form-item label="坐席ID">
					<el-input placeholder="请输入坐席ID" v-model="form.agentName"></el-input>
				</el-form-item>
			</div>
			<div class="form-search">
				<el-form-item label="表单状态">
					<el-select v-model="form.formState" placeholder="请选择表单状态">
						<el-option v-for="item in selectFormState" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" class="btn">
					<el-button @click="searchData">检索</el-button>
				</el-form-item>
			</div>
		</el-form>
		<div class="head">
			<el-button type="primary" @click="exportExcel"><span class="text">导出Excel</span></el-button>
		</div>
		<Table :tableData="tableData" @changeSelect="changeSelect" @currentChange="currentChange">
			<template v-slot:formListStatus>
				<el-table-column type="selection" label="请选择" align="center" width="50" :reserve-selection="true" :selectable="selectable"> </el-table-column>
			</template>
			<template v-slot:btn>
				<el-table-column width="310px" align="center" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" class="set-btn" @click="showDetailsFormData(scope.$index, scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</template>
		</Table>
		<div class="page">
			<PageSize :pages="formListPage.pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage"></PageSize>
		</div>
	</div>
</template>
<script>
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
import { getFormDataList, getAllFormName, getFormDetail } from '../../api/api';
import ViewFormDeatil from '@/views/components/ViewFormDeatil.vue';
import FormDetailList from './FormDetailList.vue';
import { downExcle } from '@/utils/downLoadExcel.js';
import '@zco/form-designer/dist/form-designer.css';
import { setOperationLogFuntion, filterFormRecord } from '@/utils/tool.js';
export default {
	components: {
		Table,
		PageSize,
		ViewFormDeatil,
		FormDetailList
	},
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			//所有输入框的值
			form: {
				formName: '',
				formNumber: '',
				pushTime: '',
				// getTime: '',
				agentId: '',
				agentName: '',
				formState: ''
			},
			//表单名称下拉列表
			selectFromName: [],
			//表单状态下拉列表
			selectFormState: [
				{
					value: 'success',
					label: '提交成功'
				},
				{
					value: 'fail',
					label: '提交失败'
				},
				{
					value: 'timeout',
					label: '提交超时'
				}
			],
			//表单页码
			formListPage: {
				sessionId: this.sessionId,
				followId: '',
				toClientId: '',
				agentName: '',
				pushStartTime: '',
				pushEndTime: '',
				submitStartTime: '',
				submitEndTime: '',
				name: '',
				status: '',
				pages: { page: 1, pageSize: 10, total: 0 }
			},
			tableData: {
				sort: false,
				checkedGroup: true,
				//表头
				tableHead: [
					{
						label: '表单流水号',
						prop: 'formNumber'
					},
					{
						label: '坐席ID',
						prop: 'agentName'
					},
					{
						label: '推送时间',
						prop: 'pushTime'
					},
					{
						label: '表单状态',
						prop: 'formStatus'
					}
				],
				//表单数据
				tableConent: [],
				showIndex: true,
				showCheck: false
			},
			// 查看表单数据详情
			viewFormTips: false,

			//选中表单数据
			selectedForm: [],

			// 详情列表数据
			formDetailList: [],

			serviceNo: ''
		};
	},
	created() {},
	mounted() {
		this.getFormDataList();
		this.getAllFormName();
	},
	methods: {
		//获取当前这通会话推送的表单
		async getFormDataList() {
			let data = {
				page: this.formListPage.pages.page,
				pageSize: this.formListPage.pages.pageSize,
				sessionId: this.sessionId ? this.sessionId : '',
				followId: this.form.formNumber,
				toClientId: this.form.agentId,
				agentName: this.form.agentName,
				name: this.form.formName,
				status: this.form.formState,
				pushStartTime: this.form.pushTime[0] ? this.form.pushTime[0] : '',
				pushEndTime: this.form.pushTime[1] ? this.form.pushTime[1] : ''
				// submitStartTime: this.form.getTime[0] ? this.form.getTime[0] : '',
				// submitEndTime: this.form.getTime[1] ? this.form.getTime[1] : ''
			};
			try {
				let formDataList = await getFormDataList(data);
				console.log('formDataList:', formDataList);
				this.formListPage.pages.total = formDataList.data.data.count;
				this.tableData.tableConent = filterFormRecord(formDataList.data.data.data);
			} catch (e) {
				console.log(e);
				this.$message.error('获取表单列表失败');
				this.$requestApiError(e, () => {
					this.$router.push('/');
				});
			}
		},
		//获取所有的表单名称
		async getAllFormName() {
			try {
				let data = await getAllFormName();
				console.log(data.data.data.data);
				let allFormName = data.data.data.data;
				allFormName.forEach(item => {
					this.selectFromName.push({ value: item.name, label: item.name });
				});
			} catch (e) {
				console.log(e);
				// this.$message.error('获取表单名称失败');
			}
		},
		//检索
		async searchData() {
			if (this.form.pushTime && this.form.pushTime.length > 0) {
				this.form.pushTime[0] = this.form.pushTime[0] ? this.$moment(this.form.pushTime[0]).toISOString() : '';
				this.form.pushTime[1] = this.form.pushTime[1] ? this.$moment(this.form.pushTime[1]).toISOString() : '';
			} else {
				this.form.pushTime = '';
			}
			// if (this.form.getTime.length > 0) {
			// 	this.form.getTime[0] = this.form.getTime[0] ? this.$moment(this.form.getTime[0]).toISOString() : '';
			// 	this.form.getTime[1] = this.form.getTime[1] ? this.$moment(this.form.getTime[1]).toISOString() : '';
			// } else {
			// 	this.form.getTime = '';
			// }
			let data = {
				page: this.formListPage.pages.page,
				pageSize: this.formListPage.pages.pageSize,
				sessionId: this.sessionId ? this.sessionId : '',
				followId: this.form.formNumber,
				toClientId: this.form.agentId,
				agentName: this.form.agentName,
				name: this.form.formName,
				status: this.form.formState,
				pushStartTime: this.form.pushTime[0] ? this.form.pushTime[0] : '',
				pushEndTime: this.form.pushTime[1] ? this.form.pushTime[1] : ''
				// submitStartTime: this.form.getTime[0] ? this.form.getTime[0] : '',
				// submitEndTime: this.form.getTime[1] ? this.form.getTime[1] : ''
			};
			try {
				let formDataList = await getFormDataList(data);
				console.log(formDataList, '检索');
				this.formListPage.pages.total = formDataList.data.data.count;
				this.tableData.tableConent = filterFormRecord(formDataList.data.data.data);
			} catch (e) {
				console.log(e);
				this.$message.error('检索失败');
			}
		},
		//选中数据
		changeSelect(val) {
			console.log(val);
			this.selectedForm = val;
		},
		//查看详情
		async showDetailsFormData(index, row) {
			try {
				console.log('showDetailsFormData', index, row);
				const { formHistoryDetails = [], formNumber = '', formHistoryTemplates = [] } = row;
				this.serviceNo = formNumber;
				const fillFormName = formHistoryDetails.map(item => {
					return item.formTemplate.name;
				});
				console.log('fillFormName', fillFormName);
				const diffForm = formHistoryTemplates.filter(item => {
					console.log('sss', item, fillFormName);
					if (!fillFormName.includes(item.name)) {
						return item;
					}
				});
				console.log('diffForm', diffForm);
				diffForm.map(item => {
					formHistoryDetails.push({
						formTemplate: {
							name: item.name
						}
					});
				});
				formHistoryDetails.forEach((item)=>{
					if(item.id){
						item.status = '已提交'
					}else{
						item.status = '未提交'
					}
				});
				console.log('formHistoryDetails', formHistoryDetails);
				this.formDetailList = formHistoryDetails;
				this.viewFormTips = true;
			} catch (e) {
				console.log('e', e);
				this.$message.error('查看详情失败！');
			}
		},
		// 关闭查看详情
		closeDetail() {
			this.viewFormTips = false;
		},
		//导出
		exportExcel() {
			const sheetNames = this.selectedForm.map(form => form.name);
			const formData = this.selectedForm.map(form => form.formData);
			const formName = this.$route.query.sessionId;
			const formHeader = ['ID', 'Session ID', '表单名称', '表单流水号', '访客ID', '推送时间', '获取时间', '表单状态'];
			downExcle(sheetNames, formName, formHeader, formData);
			if (sheetNames.length !== 0 && formData.length !== 0) {
				setOperationLogFuntion({ type: '1', category: 'downloadAndExport', content: '导出表单列表' });
			}
		},
		//分页
		changePageSize(val) {
			this.formListPage.pages.pageSize = val;
			this.formListPage.pages.page = 1;
			this.getFormDataList();
		},
		//分页
		changeCurrentPage(val) {
			this.formListPage.pages.page = val;
			this.getFormDataList();
		},
		//多选框禁用
		selectable(row) {
			if (row.status === 'success') {
				return true;
			}
			return false;
		}
	}
};
</script>
<style lang="less" scoped>
.formList-container {
	padding-top: 20px;
	padding-left: 18px;
	.el-form {
		.el-form-item {
			padding-right: 18px;
		}

		.btn {
			padding: 0;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
		}
	}
	.head {
		.el-button {
			width: 106px;
			height: 44px;
			background: #6384fe;
			border-radius: 4px;
			.text {
				width: 54px;
				height: 11px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 20px;
			}
		}
	}
	.table {
		margin-top: 15px;
		border-radius: 4px;
		border: 1px solid #ebedef;
		background: #ffffff;
	}
	.set-btn {
		color: #fff;
		background-color: #6384fe;
		border-radius: 4px;
	}
	.page {
		margin-top: 32px;
	}
	.form-search {
		display: flex;
	}
}
</style>

<style lang="less">
.formList-container {
	.table .el-table th {
		background: #f8f8f9;
	}
	.form-search {
		.el-form-item__content {
			width: 100% !important;
			display: inherit;
			margin-left: 0px !important;
		}
	}
	.el-date-editor .el-range-input {
		width: 40%;
		text-align: left;
	}
	.el-form-item {
		label {
			padding: 0;
		}
		.el-date-editor .el-range__icon,
		span {
			line-height: 27px;
		}
		.el-date-editor .el-range__close-icon {
			line-height: 27px;
		}
		.el-date-editor .el-range-separator {
			color: #dcdee2;
			line-height: 26px;
			padding-right: 26px;
		}
	}
	.btn {
		.el-form-item__content {
			margin-top: 40px;
		}
	}
	.line {
		text-align: center;
		padding: 0 10px;
		color: #d3d3d3;
	}
}
</style>
